<script setup lang="ts">
import { NLayoutSider, NMenu } from "naive-ui";
import { useLayoutStore } from "../../../plugins/store";

let layoutStore = useLayoutStore();

const onUpdateMenu = (value: string) => {
  console.log("这里", value);
  layoutStore.$patch({
    current: value,
    collapsed: true,
  });
};
</script>

<template>
  <NLayoutSider
    position="absolute"
    :native-scrollbar="false"
    :bordered="!layoutStore.collapsed"
    class="tw-bottom-0 t"
    collapse-mode="transform"
    :collapsed-width="0"
    :show-collapsed-content="false"
    :collapsed="layoutStore.collapsed"
    trigger-style="top:40px"
    collapsed-trigger-style="top:40px"
    show-trigger="bar"
    @collapse="layoutStore.collapsed = true"
    @expand="layoutStore.collapsed = false"
  >
    <NMenu
      :value="layoutStore.current"
      :options="layoutStore.menu"
      @update:value="onUpdateMenu"
    >
    </NMenu>
  </NLayoutSider>
</template>

<style scoped></style>
